
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb mt-3">
        <strong>当前位置:</strong>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">管理中心</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">用户管理</a></li>
        <li class="breadcrumb-item active" aria-current="page">用户信息</li>
    </ol>
</nav>
<div class="input-group mb-3 w-50 mx-auto">
    <input id="input-search-role" type="text" class="form-control" placeholder="输入用户账号"
           aria-describedby="btn-search-role">
    <button class="btn btn-primary" type="button" id="btn-search-role">搜索</button>
</div>
<!-- 新增用户的模态框 -->
<div class="modal fade" id="modal-base-insert" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-base-h52">新增用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <nav>
                    <img id="ms-img-head2" alt="..." src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/public/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.png" class="ms-img-md-center">
                </nav>
                <form id="ms-form-user-insert" class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label ">账号</label>
                        <input name="usercode" type="text" class="form-control">
                        <div class="valid-feedback">提示: 格式正确!</div>
                        <div class="invalid-feedback">提示: 用户名不能为空</div>
                    </div>

                    <div class="col-md-4">
                        <label for="ms-form-user-base-username" class="form-label">用户名</label>
                        <input name="username" type="text" class="form-control" placeholder="">
                        <div class="valid-feedback">提示: 格式正确!</div>
                        <div class="invalid-feedback">提示: 用户名不能为空</div>
                    </div>

                    <div class="col-md-4">
                        <label for="ms-form-user-base-tel" class="form-label">联系方式</label>
                        <input name="tel" type="text" class="form-control">
                        <div class="valid-feedback">提示: 格式正确!</div>
                        <div class="invalid-feedback">提示: 联系方式不能为空</div>
                    </div>
                    <div class="col-md-4">
                        <label for="ms-form-user-base-tel" class="form-label">邮箱</label>
                        <input name="email" type="text" class="form-control" id="ms-form-user-base-email2">
                        <div class="valid-feedback">提示: 格式正确!</div>
                        <div class="invalid-feedback">提示: 邮箱不能为空</div>
                    </div>
                    <div class="col-md-4">
                        <label for="ms-form-user-base-tel" class="form-label">密码</label>
                        <input name="password" type="password" class="form-control">
                        <div class="valid-feedback">提示: 格式正确!</div>
                        <div class="invalid-feedback">提示: 密码不能为空</div>
                    </div>
                    <div class="col-md-3">
                        <label for="ms-form-user-base-birthday" class="form-label">生日</label>
                        <input name="birthday" type="date" class="form-control" id="ms-form-user-base-birthday2">
                        <div class="valid-feedback">提示: 格式正确!</div>
                        <div class="invalid-feedback">提示: 生日不能为空</div>
                    </div>
                    <div class="col-md-12 align-self-end">
                        <label class="form-label">性别</label>
                        <div class="form-check-inline align-self-end">
                            <input class="form-check-input" type="radio" name="gender" value="1" id="ms-form-user-base-gender-12">
                            <label class="form-check-label" for="ms-form-user-base-gender-1">男</label>
                        </div>
                        <div class="form-check-inline align-self-end">
                            <input class="form-check-input" type="radio" name="gender" value="0" id="ms-form-user-base-gender-02">
                            <label class="form-check-label" for="ms-form-user-base-gender-0">女</label>
                        </div>
                    </div>

                    <nav class="col-md-3 align-self-end">
                        <label for="ms-form-user-base-province" class="form-label">省</label>
                        <select name="provinceCode" class="form-select"></select>
                    </nav>
                    <div class="col-md-1"></div>
                    <nav class="col-md-3 align-self-end">
                        <label for="ms-form-user-base-city" class="form-label">市</label>
                        <select name="cityCode" class="form-select"></select>
                    </nav>
                    <div class="col-md-1"></div>
                    <nav class="col-md-3 align-self-end">
                        <label for="ms-form-user-base-area" class="form-label">区</label>
                        <select name="areaCode" class="form-select"></select>
                    </nav>
                    <div class="col-12">
                        <label for="ms-form-user-base-address" class="form-label">详细地区</label>
                        <input name="address" type="text" class="form-control" id="ms-form-user-base-address2" placeholder="">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-user-base-address-fail2" class="invalid-feedback">
                            提示: 详细地区不能为空
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-save-insert" type="button" class="btn btn-primary" onclick="saveUserInsert('modal-save-insert')">添加</button>
            </div>
        </div>
    </div>
</div>

<!--修改基本信息的模态框-->
<div class="modal fade" id="modal-base" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-base-h5">编辑用户信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <nav>
                    <img id="ms-img-head" alt="..." src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/image-default-head/%E5%A4%B4%E5%83%8F-%E5%A5%B3%E5%AD%A6%E7%94%9F5.png" class="ms-img-md-center">
                </nav>
                <nav class="text-center mt-3">
                    <button class="btn btn-primary" onclick="showDefaultHeadModal()" data-bs-toggle="modal" data-bs-target="#modal-head-default">修改默认头像</button>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-head-custom">修改自定义头像</button>
                </nav>
                <form id="ms-form-user-base" class="row g-3">
                    <div class="col-md-4">
                        <label for="ms-form-user-base-code" class="form-label ">ID</label>
                        <input name="id" readonly type="text" class="form-control is-valid" id="ms-form-user-base-id">
                        <div class="valid-feedback">
                            提示: ID 不可更改
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="ms-form-user-base-code" class="form-label ">账号</label>
                        <input name="usercode" readonly type="text" class="form-control is-valid" id="ms-form-user-base-code">
                        <div class="valid-feedback">
                            提示: 账号不可更改
                        </div>
                    </div>

                    <div class="col-md-4">
                        <label for="ms-form-user-base-username" class="form-label">用户名</label>
                        <input name="username" type="text" class="form-control" id="ms-form-user-base-username" placeholder="">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-user-base-username-fail" class="invalid-feedback">
                            提示: 用户名不能为空
                        </div>
                    </div>

                    <div class="col-md-3">
                        <label for="ms-form-user-base-tel" class="form-label">联系方式</label>
                        <input name="tel" type="text" class="form-control" id="ms-form-user-base-tel">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-user-base-tel-fail" class="invalid-feedback">
                            提示: 联系方式不能为空
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label for="ms-form-user-base-tel" class="form-label">邮箱</label>
                        <input name="email" type="text" class="form-control" id="ms-form-user-base-email">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-user-base-email-fail" class="invalid-feedback">
                            提示: 联系方式不能为空
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label for="ms-form-user-base-birthday" class="form-label">生日</label>
                        <input name="birthday" type="date" class="form-control" id="ms-form-user-base-birthday">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div class="invalid-feedback">
                            提示: 生日不能为空
                        </div>
                    </div>
                    <div class="col-md-3 align-self-end">
                        <label class="form-label">性别</label>
                        <div class="form-check-inline align-self-end">
                            <input class="form-check-input" type="radio" name="gender" value="1" id="ms-form-user-base-gender-1">
                            <label class="form-check-label" for="ms-form-user-base-gender-1">
                                男
                            </label>
                        </div>
                        <div class="form-check-inline align-self-end">
                            <input class="form-check-input" type="radio" name="gender" value="0" id="ms-form-user-base-gender-0">
                            <label class="form-check-label" for="ms-form-user-base-gender-0">
                                女
                            </label>
                        </div>
                    </div>

                    <nav class="col-md-3 align-self-end">
                        <label for="ms-form-user-base-province" class="form-label">省</label>
                        <select name="provinceCode" id="ms-form-user-base-province" class="form-select">
                        </select>
                    </nav>
                    <div class="col-md-1"></div>
                    <nav class="col-md-3 align-self-end">
                        <label for="ms-form-user-base-city" class="form-label">市</label>
                        <select name="cityCode" id="ms-form-user-base-city" class="form-select">
                        </select>
                    </nav>
                    <div class="col-md-1"></div>
                    <nav class="col-md-3 align-self-end">
                        <label for="ms-form-user-base-area" class="form-label">区</label>
                        <select name="areaCode" id="ms-form-user-base-area" class="form-select">
                        </select>
                    </nav>
                    <div class="col-12">
                        <label for="ms-form-user-base-address" class="form-label">详细地区</label>
                        <input name="address" type="text" class="form-control" id="ms-form-user-base-address" placeholder="">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-user-base-address-fail" class="invalid-feedback">
                            提示: 详细地区不能为空
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-sure" type="button" class="btn btn-primary" onclick="saveUserBase('modal-sure')">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改默认头像的模态框 -->
<div class="modal fade" id="modal-head-default" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal-head-default-h5" aria-hidden="false"
     xmlns:th="http://www.thymeleaf.org">
    <div class="modal-dialog" style="background: white">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-head-default-h5">选择默认的头像</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="ms-modal-user-default-img" class="modal-body">
                <ul class="list-unstyled row mx-auto align-self-center ms-3">
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="modal-base">返回</button>
                <button id="ms-modal-user-head-default-save" type="button" class="btn btn-primary" onclick="saveUserHead('ms-modal-user-head-default-save')">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 自定义头像的模态框 -->
<div class="modal fade" id="modal-head-custom" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal-head-custom-h5" aria-hidden="false"
     xmlns:th="http://www.thymeleaf.org">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-head-custom-h5">编辑用户信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body container">
                <div class="shadow p-3 row" id="Tz_box" >
                    <h2 class="text-center">自定义头像</h2>
                    <div class="col-md-1"></div>
                    <div class="col-md-6">
                        <input type="file" id="input" size="10" style="visibility:hidden;"/>
                        <canvas id="Tz_wrap" class="shadow"></canvas>
                        <p class="text-center">请拖拽图片至此区域</p>
                    </div>
                    <div class="col-md-5 align-self-end text-center">

                        <div>
                            <canvas id="plugin-imgUpload-final-img" class="preview shadow"></canvas>
                            <p class="tit">图片预览:200*200</p>
                            <div class="prev"><img src="" id="imgg"></div>
                        </div>
                    </div>
                    <nav class="text-center mb-5">
                        <div class="btn btn-primary mx-3"  id="upload">⇧<span>上传图片</span></div>
                        <div class="btn btn-primary mx-3" id="rotateLeftBtn">↶<span>左旋转</span></div>
                        <div class="btn btn-primary mx-3"  id="rotateRightBtn">↷<span>左旋转</span></div>
                    </nav>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-sure-custom" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>

</div>
<!--动态渲染加载图标-->
<div id="admin-user-center-placeholder" class="row d-flex justify-content-center"></div>

<div class="container col-md-10">
    <!--批量操作按钮-->
    <div style="text-align: right">
        <button class="btn btn-primary ml-auto" onclick="renderModalInsert(this)" data-bs-toggle="modal" data-bs-target="#modal-base-insert">新增</button>
        <button class="btn btn-danger ml-auto" onclick="removeUsers()">批量删除</button>
    </div>
    <h6 id="textShowResult" class="text-dark">共0条结果</h6>
    <table class="table table-bordered text-center">
        <thead class="table-light">
        <tr>
            <td style="width: 5%"><input id="cb_all" type="checkbox" style="width: 20px; height: 20px">全选</td>
            <td style="width: 5%;">ID</td>
            <td style="width: 6%;">账号</td>
            <td style="width: 6%;">昵称</td>
            <td style="width: 4%;">性别</td>
            <td style="width: 8%;">头像</td>
            <td style="width: 8%;">联系电话</td>
            <td style="width: 20%;">联系地址</td>
            <td style="width: 15%">操作</td>
        </tr>
        </thead>
        <tbody id="admin-card-user-list-entry">
        </tbody>
    </table>
</div>

<!-- 结果通过动态渲染-->
<nav id="admin-card-user-pages-entry" class="Page navigation mb-0"></nav>